<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% if title %}
    <title>{{ title }} - Mythic</title>
    {% else %}
    <title>Mythic</title>
    {% endif %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/toastr.css">
    <script src="/static/static_js.js"></script>
    <script src="/static/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="/static/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="/static/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <script src="/static/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
    <link rel="stylesheet" href="/static/fontawesome/v5.6.3/css/all.css">
    <script src="/static/ajax/libs/ace/1.4.5/ace.js"></script>
    <script src="/static/ajax/libs/ace/1.4.5/mode-javascript.js"></script>
    <script src="/static/ajax/libs/ace/1.4.5/worker-javascript.js"></script>
</head>

<style>
body{
    background-color:{{ config['background-color'] }};
    color:{{ config['text-color'] }};
    font-size: {{ config['font-size']}}px !important;
}
.h4 .h3 .h2 .h1 *{
    color: {{ config['text-color'] }};
}
pre {
    color: {{ config['text-color'] }};
    margin-bottom:0;
}
.btn-link{
    background:transparent;
    -webkit-appearance:none;
    appearance:none;
    color: {{config['link']}};
}
.btn-link:hover{
    background:transparent;
    -webkit-appearance:none;
    appearance:none;
    color: {{config['link']}};
}
.nav-tabs .nav-link{
    border-color: black;
    border-bottom: none;
    color: white;
}
.nav-item .nav-link{
    color: white;
}
.nav-tabs:hover .nav-link:hover{
    border-color: black;
    border-bottom: none;
    color: white;
}
#toast-container>div{
    opacity: 1;
    overflow: auto;
}
.toast-top-right{
    word-wrap:break-word;
    max-width:50%;
}
#toast-container >  .toastr {
    background-image: none !important;
    overflow:auto;
    max-height: calc(95vh);
}
#toast-container > .toastr:before {
    position: fixed;
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
    line-height: 18px;
    float: left;
    color: #FFF;
    padding-right: 0.5em;
    margin: auto 0.5em auto -1.5em;
}
#toast-container >  .toast-warning:before {
    content: "\f071";
    font-weight: 900;
}
#toast-container > .toast-error:before {
    content: "\f06a";
    font-weight: 900;
}
#toast-container > .toast-info:before {
    content: "\f05a";
    font-weight: 900;
}
#toast-container > .toast-success:before {
    content: "\f058";
    font-weight: 900;
}
.card{
    background:{{ config['background-color'] }};
    color:{{ config['text-color'] }};
}
.card-body{
    background:{{ config['background-color'] }};
    color:{{ config['text-color'] }};
}
.card-footer{
    background:{{ config['background-color'] }};
    color:{{ config['text-color'] }}
}
.success_header{
    background: {{config['success_highlight']}};
}
.dropdown-item{
    color:{{ config['text-color'] }}
}
.dropdown-item:hover{
    background-color: {{config['highlight']}} !important;
    color: {{config['highlight-text']}};
}
.form-control{
    background-color:{{ config['background-color'] }};
    color: {{ config['text-color'] }};
    border-color: {{ config['text-color']}};
}
.tab-content{
    background:{{ config['background-color'] }}
}
.response-background{
    background-color: {{config['response-background']}}
}
.span{
    color: {{ config['text-color'] }};
}
span.timestamp{
    color: {{ config['timestamp'] }};
}
span.response{
    color: {{ config['text-color'] }};
}
span.operator{
    color: {{ config['operator'] }};
}
span.display{
    color: {{ config['display'] }}
}
span.matching{
     color:{{ config['display'] }}
}
.preprocessing{
    background:  {{config['background-color']}};
}
.submitted{
    background: {{config['background-color']}};
}
.processing{
    background: {{config['background-color']}};
}
.processed{
    background: {{config['background-color']}};
}
.sticky-top{
    position:-webkit-sticky;
    position:sticky;
    top:-1px;
    z-index:1;
}
.sticky-bottom{
    position:-webkit-sticky;
    position:sticky;
    bottom:0;
    z-index:1;
}
.table{
    background-color: transparent;
    border-collapse: collapse;
}

.bg-header-dark{
    background-color: {{config['bg-header-dark']}};
}
.bg-header{
    background-color: {{config['bg-header']}};
}
.bg-card-body{
    background-color: {{config['bg-card-body']}};
}
.bg-card-body-l1{
    background-color: {{config['bg-card-body-l1']}};
}
.bg-card-body-l2{
    background-color: {{config['bg-card-body-l2']}};
}
.bg-card-footer{
    background-color: {{config['bg-card-footer']}};
}
.bg-body{
    background-color: {{config['bg-body']}};
}
.bg-card-warning{
    background-color: #ffeb3b;
    color: black;
}
hr{
    border: 2px dashed {{config['bg-card-body-l2']}};
}
.table th{
    background-color:  {{config['th']}};
    color: {{config['text-color']}};
    text-align:left;
}
.table tbody tr:hover{
    background-color: {{config['row-highlight']}};
}
.table tbody tr:hover:nth-child(odd){
    background-color:  {{config['row-highlight']}};
}
.table tr td{
    padding: 1px 1px 1px 1px
}
.font-outline {
    text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}
.btn-mitre {
    background-color: transparent;
    color: {{config['text-color']}};
}
.btn-mitre:hover {
    color: {{config['highlight-text']}};
    background-color: {{config['highlight']}};
}
/* unvisited link */
a:link {
  color: {{ config['link'] }};
}
a:hover {
  color: {{ config['link'] }};
}
/* visited link */
a:visited {
  color: {{config['link-visited']}};
}

.autocomplete-items {
  position: absolute;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  bottom: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: {{config['background-color']}};
  border-bottom: 1px solid {{config['text-color']}};
  overflow-y:auto;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: {{config['hover']}};
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: {{config['highlight']}} !important;
  color: {{config['highlight-text']}};
}
.dropdown-menu {
    background-color: {{ config['bg-card-body-l2'] }};
}
.dropdown-item {
    background-color: {{ config['bg-card-body-l2'] }};
}
.dropdown-menu > a{
    background-color: {{ config['bg-card-body-l2'] }};
    color: {{ config['text-color'] }}
}
.dropdown-menu > a:hover{
    background-color: {{ config['highlight'] }};
    color: {{ config['highlight-color'] }}
}
.modal-body {
    max-height: calc(80vh);
    overflow-y: auto;
    background-color: {{config['bg-card-body']}};
    color: {{config['text-color']}};
}
.modal-header {
    border-radius: 20px;
}
.modal-content {
    border-radius: 20px;
    background-color: {{config['bg-card-body']}};
    color: {{config['text-color']}};
}
.select {
    background-color: transparent;
    color:{{ config['text-color'] }};
}
option{
    color: {{ config['text-color'] }};
    background-color: {{config['bg-card-body']}};
}
input[type=text] {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none;
}
input[type=text]:disabled{
    background-color: transparent;
    border: 0;
}
select[multiple]:disabled{
    background-color: transparent;
    border: 0;
    overflow-y:auto
}
input[type=text]:focus {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none
}
input[type=password] {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none;
}
input[type=password]:focus {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none
}
input[type=number] {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none;
}
input[type=number]:focus {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none
}
input[type=file] {
    background-color: transparent;
     color:{{ config['text-color'] }};
    outline: none;
}
.form-control {
    background-color: transparent;
    display: inline-block;
    border-color: rgb(116,116,116);
}
.form-control:focus{
    background-color: transparent;
    color: {{ config['text-color'] }};
}
.form-control:disabled{
    background-color: transparent;
    color: {{ config['text-color'] }};
}
textarea {
    background-color: transparent;
    color:{{ config['text-color'] }};
}
span.operation {
    color: {{ config['operation-color'] }}
}
.dropdown > .btn-primary {
    background-color: {{ config['interact-button-color']}};
    color: {{ config['interact-button-text']}}
}
.dropdown > .btn-info {
    background-color: {{ config['interact-button-dropdown'] }}
}
.led-box {
  height: 30px;
  width: 25%;
}
.led-green {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #ABFF00;
  border-radius: 40%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #89FF00 0 2px 12px;
}
@-webkit-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-o-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
.led-red {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}
@-webkit-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-moz-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-ms-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@-o-keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
@keyframes blinkYellow {
    from { background-color: #FF0; }
    50% { background-color: #AA0; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 0; }
    to { background-color: #FF0; }
}
.led-yellow {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #FF0;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #808002 0 -1px 9px, #FF0 0 2px 12px;
  -webkit-animation: blinkYellow 1s infinite;
  -moz-animation: blinkYellow 1s infinite;
  -ms-animation: blinkYellow 1s infinite;
  -o-animation: blinkYellow 1s infinite;
  animation: blinkYellow 1s infinite;
}
.led-blue {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #24E0FF;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #006 0 -1px 9px, #3F8CFF 0 2px 14px;
}
@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

textarea {
    background: transparent;
    color: {{config['text-color']}};
}
li span.badge {
    position: absolute;
    top: -10px;
    left: 8px;
}
.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.material-switch > label::before {
    background: #BABABA;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: #6E6E6E;
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 20px;
    left: -4px;
    margin-top: -6px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 20px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}
.v-enter-active{
  transition: 0.25s;
}
.v-leave-active{
    position: absolute;
    transition: 0.25s;
}
.v-enter, .v-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(-10px);
    transition: 0.25s;
}
.v-enter-to, .v-leave{
    opacity: 1;
    transition: 0.25s;
}

.v-move {
    transition:  0.25s;
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
    opacity: 1;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  max-width: 20rem;
    width: 10rem;
  background-color: #555;
    filter: brightness(125%);
  color: #fff;
  text-align: center;
  padding: 5px 5px 5px 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 100;
  top: -15px;
  left: 125%;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent #555 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
    {% block body_config %} {% endblock %}
{% if config != undefined %}
.navbar {
    background-color: {{config['top-bar']}};
    color: white;
}
{% endif %}
</style>
<body>
{% if name %}
    <nav class="navbar navbar-expand-lg navbar-dark" style="position:relative; z-index:100;padding:0 ">
    <a class="navbar-brand" href="{{ links.index }}"><img src="/static/red_shaded_mythic_small.png" style="width:80px;height:66px;margin-left:1rem"></a>
    <button style="position:relative;margin-right:10px;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon" style="color:white;"></span>
    </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent" style="z-index:100">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Global Configurations <span class="caret"></span>
        </a>
        <div class="dropdown-menu border border-dark shadow">
            <a class="dropdown-item" href="{{ links.payloadtype_management }}">Payload Types</a>
            <a class="dropdown-item" href="{{ links.c2profile_management }}">C2 Profiles</a>
            <a class="dropdown-item" href="{{ links.artifacts_management}}">Artifact Types</a>
            <a class="dropdown-item" href="{{ links.operations_management }}">All Operations</a>
            <a class="dropdown-item" href="{{ links.manage_browser_scripts }}">Browser Scripts</a>
            <div class="dropdown-divider"></div>
            <h6 class="dropdown-header">Global Feeds</h6>
            <a class="dropdown-item" href="{{ links.web_log }}">Web Log</a>
        </div>
      </li>
        {% if links.current_operation != "" %}
        <li class="nav-item active dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Operational Views <span class="caret"></span>
            </a>
            <div class="dropdown-menu border border-dark shadow">
                <a class="dropdown-item" href="{{ links.callbacks }}">Active Callbacks</a>
                <a class="dropdown-item" href="{{ links.payload_management }}">Created Payloads</a>
                <a class="dropdown-item" href="{{ links.view_tasks }}">All Callbacks</a>
                <a class="dropdown-item" href="{{ links.credentials}}">Credentials</a>
                <a class="dropdown-item" href="{{ links.keylogs }}">Keylogs</a>
                <a class="dropdown-item" href="{{ links.files }}">Files</a>
                <a class="dropdown-item" href="{{ links.screenshots}}">Screenshots</a>
                <a class="dropdown-item" href="{{ links.search }}">Search</a>
                <a class="dropdown-item" href="{{ links.tasks_by_tag}}">Tasks by Tag</a>
                <div class="dropdown-divider"></div>
                <h6 class="dropdown-header">Operational Feeds</h6>
                <a class="dropdown-item" href="{{ links.live_feed}}">Live Task Feed</a>
                <a class="dropdown-item" href="{{ links.live_event_feed}}">Live Event Feed</a>
                <a class="dropdown-item" href="{{ links.analytics }}">Analytics Dashboard</a>
            </div>
        </li>
        {% endif %}
        <li class="nav-item active dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Create Components <span class="caret"></span>
            </a>
            <div class="dropdown-menu border border-dark shadow">
                <a class="dropdown-item" href="{{ links.payloads_creation }}">Create Payload</a>
                <a class="dropdown-item" href="{{ links.wrappers_creation }}">Create Wrapper</a>
            </div>
        </li>
        <li class="nav-item active dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Services <span class="caret"></span>
            </a>
            <div class="dropdown-menu border border-dark shadow">
                <a class="dropdown-item" href="{{ links.services_host_file }}">Host Files</a>
            </div>
        </li>
        <li class="nav-item active dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                Reporting <span class="caret"></span>
            </a>
            <div class="dropdown-menu border border-dark shadow">
                <a class="dropdown-item" href="{{links.attack_mapping}}">ATT&CK Mappings</a>
                <a class="dropdown-item" href="{{links.full_timeline}}">Generate Report</a>
                <a class="dropdown-item" href="{{links.reporting_artifacts}}">Reporting Artifacts</a>
            </div>
        </li>
        {% if name %}
        <li>
            {% if links.current_operation != "" %}
            <font size="5">&nbsp;<span class="operation"><a href="{{links.operations_management}}" style="color:white">{{links.current_operation|e}}</a>&nbsp;&nbsp;</span></font>
            {% else %}
            <font style="color:red" size="5">&nbsp;<a style="color:red" href="{{links.operations_management}}">Not part of an operation!</a>&nbsp;&nbsp;</font>
            {% endif %}
        </li>
        {% else %}
        <li class="nav-item"><a class="nav-link" href="{{ links.login }}">Login</a></li>
        {% endif %}
    </ul>
      {% if name %}
      <span v-show="messages.length > 0" id="event_notices" data-toggle="tooltip" title="Go to Live Event Feed to address important messages" style="padding:5px 10px 5px 10px;display:inline-block;cursor:pointer" class="badge badge-danger pull-right" onclick="window.location = '{{links.live_event_feed}}' ">[[ messages.length ]]</span>
      <span class="nav-item active dropdown" data-boundary="viewport" >
          <ul class="navbar-nav mr-auto">
              <li class="nav-item active dropdown">
                  <a href="/new" target="_blank" class="nav-link" style="display:inline-block"  role="button"><span class="{{config['text-color']}}"><i class="far fa-id-card"></i> New UI</span></a>
              </li>
            <li class="nav-item active dropdown">
              <a href="#" class="nav-link dropdown-toggle" style="display:inline-block" data-toggle="dropdown" role="button" ariahaspopup="true" aria-expanded="false"><span class="{{config['text-color']}}"><i class="fa fa-question-circle"></i></span> Docs<span class="caret"></span></a>
              <div class="dropdown-menu border border-dark shadow dropdown-menu-right">
                   <a class="dropdown-item" target="_blank" href="/docs/agents/">Agent Documentation</a>
                   <a class="dropdown-item" target="_blank" href="/docs/wrappers/">Wrapper Documentation</a>
                   <a class="dropdown-item" target="_blank" href="/docs/c2-profiles/">C2 Documentation</a>
                   <a class="dropdown-item" target="_blank" href="https://docs.mythic-c2.net">Mythic Documentation</a>
                </div>
            </li>
              <li class="nav-item active dropdown">
                  <a href="#" class="nav-link dropdown-toggle" style="display:inline-block" data-toggle="dropdown" role="button" ariahaspopup="true" aria-expanded="false"><span class="{{config['text-color']}}"><i class="fa fa-user"></i></span> ({{name|e}})<span class="caret"></span></a>
                  <div class="dropdown-menu border border-dark shadow dropdown-menu-right">
                        <a class="dropdown-item" href="{{ links.logout }}">Logout</a>
                        <a class="dropdown-item" href="{{ links.settings }}">Settings</a>
                    </div>
              </li>

          </ul>
        </span>
      <font size="4" style="float:right;padding-right:10px">v2.3.1</font>
      {% endif %}
  </div>
</nav>
{% endif %}
    <div id="main" class="container-fluid">
    {% block body %}{% endblock %}
    </div>

    <script type="text/javascript">
    {% include "shared_javascript.js" %}
    {% block scripts %}{% endblock %}
    </script>
</body>
</html>
